<template>
  <view>
    <view class="p-2">
      <view class="text-2xl text-center mb-10">
        padding
      </view>
      <view class="flex flex-wrap">
        <text class="bg-green-100 mr-2 mb-2 center p-0">
          p-0
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-1">
          p-1
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-2">
          p-2
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-3">
          p-3
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-4">
          p-4
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-none">
          p-none
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p">
          p
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-xs">
          p-xs
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-sm">
          p-sm
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-lg">
          p-lg
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-xl">
          p-xl
        </text>

        <text class="bg-green-100 mr-2 mb-2 center p-2xl">
          p-2xl
        </text>
      </view>
    </view>

    <view class="p-2">
      <view class="text-2xl text-center mb-10">
        margin
      </view>
      <view class="flex flex-wrap">
        <text class="bg-green-100 center m">
          m
        </text>

        <text class="bg-green-100 m-0">
          m-0
        </text>

        <text class="bg-green-100 m-1">
          m-1
        </text>

        <text class="bg-green-100 m-2">
          m-2
        </text>

        <text class="bg-green-100 m-3">
          m-3
        </text>

        <text class="bg-green-100 m-4">
          m-4
        </text>

        <text class="bg-green-100 m-none">
          m-none
        </text>

        <text class="bg-green-100 m-xs">
          m-xs
        </text>

        <text class="bg-green-100 m-sm">
          m-sm
        </text>

        <text class="bg-green-100 m-md">
          m-md
        </text>

        <text class="bg-green-100 m-lg">
          m-lg
        </text>

        <text class="bg-green-100 m-xl">
          m-xl
        </text>

        <text class="bg-green-100 m-2xl">
          m-2xl
        </text>

        <text class="bg-green-100 ms-2xl">
          ms
        </text>
      </view>
    </view>

    <view class="p-2">
      <text class="bg-green-100 top-20">
        top
      </text>

      <text class="bg-green-100 bottom-20">
        bottom
      </text>

      <text class="bg-green-100 left-20">
        left
      </text>

      <text class="bg-green-100 right-20">
        right
      </text>
    </view>
  </view>
</template>

<style lang="scss" scoped>

</style>
